<template>
	<view class="detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="轮胎售后详情" marginLeft="40%" :customBack="true" @back="back" />
		<view class="detail-content">
			<view class="step-box">
				<u-steps :current="currentStep" iconSize="22" activeColor="#CF1A1B">
					<u-steps-item v-for="(item,index) in stepList">
						<view class="slot-icon" slot="icon" :class="{'disable-icon':(index+1)>currentStep}">
							<u-icon :name="item.icon" :color="(index+1)>currentStep?'rgba(0,0,0,0.45)':'#CF1A1B'"
								size="40"></u-icon>
						</view>
						<view slot="desc" class="desc" :class="{'disable-desc':(index+1)>currentStep}">
							<view class="solt-title">
								{{ item.name }}
							</view>
							<view class="desc-date" v-if="item.date">
								{{ item.date ? item.date.split(' ')[0].slice(5,10):''}}
							</view>
							<view class="desc-time" v-if="item.date">
								{{ item.date ? item.date.split(' ')[1]:''}}
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
			<view class="info-box finish" v-if="detailInfo.claimStatus == 5 || detailInfo.claimStatus == 6">
				<!-- 				<view class="info-title">服务项确认</view>
				<view class="radio-group">
					<u-checkbox-group v-model="confirmForm.userServiceItems" placement="column" @change="checkboxChange"
						shape="circle" :disabled="detailInfo.claimStatus == 6">
						<view class="checkbox-item" v-for="(item,index) in currentServiceList">
							<u-checkbox :key="item.value" label=" " :name="item.value" size="30" iconSize="20"
								v-if="detailInfo.claimStatus == 5"></u-checkbox>
							<view class="checkbox-img" @click="previewImg(item.url)">
								<image :src="item.url"></image>
							</view>
							<view class="checkbox-name">{{item.label}}</view>
						</view>

					</u-checkbox-group>
				</view> -->
				<view class="info-title">服务评价</view>
				<view class="rate-box">
					<view class="rate">
						<u-rate :count="5" v-model="confirmForm.star" size="40" activeColor="#CF1A1B"
							:disabled="detailInfo.claimStatus == 6" @change="rateChange"></u-rate>
						<text class="rate-name">{{ confirmForm.starName }}</text>
					</view>
					<view class="text-area">
						<u--textarea v-model="confirmForm.evaluate"
							:placeholder="detailInfo.claimStatus == 6?'':'亲，快来评价下本次服务体验吧，可以从服务态度等方面描述哦~'"
							:disabled="detailInfo.claimStatus == 6" :maxlength="detailInfo.claimStatus == 5?100:300"
							:height="isEvaluate?250:80" :count="detailInfo.claimStatus == 5">
						</u--textarea>
					</view>
				</view>
				<view class="btn" v-if="detailInfo.claimStatus == 5">
					<u-button type="primary" text="确认提交" shape="circle" @click="onConfirmFinsh"></u-button>
				</view>
			</view>
			<view class="info-box wait-info" v-if="detailInfo.claimStatus == 4">
				<view class="btn">
					<u-button type="primary" text="联系门店" plain @click="callStorePhone" icon="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/ic_dhua.png"></u-button>
					<u-button type="primary" text="门店导航" plain @click="handleDH" icon="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/ic_dh.png"></u-button>
				</view>
				<view class="tips"><u-icon name="error-circle" color="#CF1A1B" size="30"></u-icon>请先联系门店，到店后按门店指引进行服务。</view>

			</view>
			<view class="info-box pay-info1" v-if="detailInfo.claimStatus == 3">
				<view class="pay-status">
				<u-icon name="more-circle" size="50" color="#fff"></u-icon> 待付款
				</view>
				<view class="pay-count">需付款：<text>￥{{ detailInfo.depreciationCost?detailInfo.depreciationCost.toFixed(2):'0.00'}}</text>
				</view>
				<u-button  text="去支付" shape="circle" @click="buyNow" :loading="payLoading" type="info"></u-button>
			</view>
			<view class="info-box" v-if="detailInfo.claimStatus !=1 && detailInfo.claimStatus != 2">
				<view class="info-title">服务项信息</view>
				<view class="list-cell">
					<u-cell title="服务单号" :value="detailInfo.claimNumber"></u-cell>
					<u-cell title="服务门店" :value="detailInfo.serviceTerminalInfo?detailInfo.serviceTerminalInfo.name:''"></u-cell>
					<u-cell title="服务门店项目" :value="currentServiceTitle"
						v-if="detailInfo.claimStatus == 5||detailInfo.claimStatus == 6"></u-cell>
					<u-cell title="服务开始时间" :value="detailInfo.depreciationCost?detailInfo.payTime:detailInfo.auditTime"
						v-if="detailInfo.claimStatus == 5||detailInfo.claimStatus == 6"></u-cell>
					<u-cell title="服务结束时间" :value="detailInfo.installTime"
						v-if="detailInfo.claimStatus == 5||detailInfo.claimStatus == 6"></u-cell>
				</view>
			</view>
			<!-- 			<view class="info-box server-code" v-if="detailInfo.claimStatus == 3||detailInfo.claimStatus == 4">
				<view class="title">联保服务码</view>
				<view class="qr">
					<image :src="baseUrl+'/user-center/qr-code/generate?content='+detailInfo.qrCodeInfo+'&width=200'">
					</image>
				</view>
				<view class="code">{{detailInfo.claimNumber}}</view>
				<view class="tip">请出示此码给服务门店</view>
				<view class="btn">
					<u-button type="primary" text="查看门店" shape="circle" style="width:50%" @click="goStore(detailInfo)"></u-button>
				</view>
			</view> -->
			<view class="info-box" v-if="detailInfo.claimStatus != 1 && detailInfo.claimStatus != 2">
				<view class="info-title">售后订单</view>
				<view class="list-cell">
					<u-cell title="售后订单号" :value="detailInfo.claimNo"></u-cell>
					<u-cell title="轮胎折旧费" :value="'￥'+(detailInfo.depreciationCost?detailInfo.depreciationCost.toFixed(2):'0.00')"></u-cell>
					<u-cell title="下单时间" :value="detailInfo.createdTime"></u-cell>
					<u-cell title="支付方式" value="线上支付"></u-cell>
					<u-cell title="支付状态" :value="detailInfo.claimStatus == 3?'未支付':'已支付'"></u-cell>
				</view>
			</view>
			<view class="info-box reject-info" v-if="detailInfo.claimStatus == 2">
				<view class="info-title" style="color:#CF1A1B">驳回理由</view>
				<view class="text-area-box">
					{{ detailInfo.handleRemark }}
				</view>
				<view class="btn" v-if="detailInfo.delFlag == 'N'">
					<view style="width: 200rpx;">
						<u-button type="primary" text="去修改申请" shape="circle" plain
							@click="goEditApply(detailInfo)"></u-button>
					</view>

				</view>
			</view>
			<view class="info-box base-info">
				<view class="info-title">基本信息</view>
				<view class="list-cell">
					<u-cell title="申请人姓名" :value="detailInfo.userName"></u-cell>
					<u-cell title="申请人电话" :value="detailInfo.phone"></u-cell>
					<u-cell title="胎码" :value="detailInfo.itemNumber"></u-cell>
					<u-cell title="轮胎种类" :value="detailInfo.itemType"></u-cell>
					<u-cell title="品牌" :value="detailInfo.brandName"></u-cell>
					<u-cell title="规格型号" :value="detailInfo.specsName"></u-cell>
					<u-cell title="年周号" :value="detailInfo.yearWeek"></u-cell>
					<u-cell title="花纹号" :value="detailInfo.pattern"></u-cell>
					<u-cell title="负荷指数/速度级别" :value="detailInfo.speedLevel"></u-cell>
					<u-cell title="是否有轮胎宝理赔" :value="detailInfo.isTireFactoring != '0'?'是':'否'"></u-cell>
					<u-cell title="是否有轮胎保参保" :value="detailInfo.isTireInsurance != '0'?'是':'否'"></u-cell>
					<u-cell title="目前所在区域"
						:value="detailInfo.province+detailInfo.city+(detailInfo.country?detailInfo.country:'')"></u-cell>
					<u-cell title="详细地址" :value="detailInfo.address"></u-cell>
					<u-cell title="售后门店" v-if="detailInfo.claimStatus<3"
						:value="detailInfo.serviceStore?detailInfo.serviceStore:detailInfo.terminalName"></u-cell>

				</view>
				<view class="info-title">
					<view>备注</view>
					<!-- <view>{{ detailInfo.remarks.length }}/140</view> -->
				</view>
				<view class="text-area-box">
					{{ detailInfo.remarks?detailInfo.remarks:'暂无备注' }}
				</view>
			</view>
			<view class="info-box pay-info">
				<view class="info-title">购买信息</view>
				<view class="list-cell">
					<u-cell title="购买地区" :value="detailInfo.purchaseArea"></u-cell>
					<u-cell title="购买门店" :value="detailInfo.terminalName"></u-cell>
					<u-cell title="购买日期" :value="detailInfo.orderCreateDate"></u-cell>
				</view>
			</view>
			<view class="info-box tire-img">
				<view class="info-title">轮胎照片</view>
				<view class="img-box">
					<view class="img-item" v-for="item in detailInfo.claimFiles" v-if="item.fileUrl">
						<view class="img-title">
							<view class="title">{{ item.name}}</view>
							<!-- <view class="exp">侧面照片</view> -->
						</view>
						<view class="pic">
							<image class="img"
								:src="item.fileUrl?item.fileUrl:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png'"
								@click="onPreview(item.fileUrl)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tip-content" v-if="detailInfo.claimStatus === 1">
				<view class="content">
					<text class="dot"></text>
					申请通过后可享受轮胎售后，若申请长时间未通过，请致电
					<text class="phone" @click="callPhone">400-696-5399</text>
					电话提醒审核员尽快审核。
				</view>
			</view>
		</view>
		<view class="footer" v-if="detailInfo.claimStatus == 3||detailInfo.claimStatus == 1">
			<u-button type="primary" text="去支付" @click="buyNow" :loading="payLoading" v-if="detailInfo.claimStatus==3"></u-button>
			<u-button type="primary" text="联系客服" @click="callPhone" v-if="detailInfo.claimStatus == 1"></u-button>
		</view>
		<!-- 		<u-modal :show="show" title="提示" content='所选服务端项与门店不符,是否继续提交？' :showCancelButton="true" @confirm="submitData"
			@cancel="show=false"></u-modal> -->
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		baseUrl
	} from '@/common/config'
	import payment from '@/mixins/payment.js'
	export default {
		mixins: [payment],
		components: {
			navBar
		},
		data() {
			return {
				paddingTop: '',
				currentStep: 2,
				stepList: [],
				detailInfo: '',
				baseUrl: baseUrl,
				serviceList: [],
				currentServiceList: [],
				currentServiceTitle: '换胎',
				show: false,
				confirmForm: {
					evaluate: "",
					id: 0,
					star: 5,
					starName: "非常好",
					userServiceItems: "1"
				},
				successRouter: '',
				payLoading: false,
				orderId: '',
				isEvaluate:true
			}
		},
		methods: {
			back() {
				if (this.successRouter) {
					uni.reLaunch({
						url: `/indexPack/guarantee/index?id=4`
					});
				} else {
					uni.navigateBack();
				}

			},
			async getDetailInfo(id) {
				try {
					const res = await this.$request({
						method: 'get',
						url: `/ltb-center/union-insurance-claim/detail/${id}`,
					})
					this.currentServiceList = []
					this.detailInfo = res.datas
					this.serviceList = [{
							value: '1',
							label: '换胎',
							url: res.datas.tireChange

						},
						{
							value: '2',
							label: '动平衡',
							url: res.datas.dynamicBalance

						},
						{
							value: '3',
							label: '日间外出',
							url: ''

						},
						{
							value: '4',
							label: '夜间外出',
							url: ''

						},
						{
							value: '5',
							label: '换备胎',
							url: res.datas.changePhoto

						},
						{
							value: '6',
							label: '充气',
							url: res.datas.inflatablePhoto

						}
					]
					this.setStep(res.datas)
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}

				uni.stopPullDownRefresh();
			},
			//配置审核步骤
			setStep(val) {
				let status = val.claimStatus
				//审核中
				if (status == 1) {
					this.currentStep = 2
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '审核中',
							icon: 'file-text'
						},
						{
							name: '待付款',
							icon: 'account-fill'
						},
						{
							name: '待服务',
							icon: 'heart-fill'
						},
						{
							name: '确认服务',
							icon: 'checkbox-mark'
						}
					]
				}
				//已驳回
				if (status == 2) {
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '已驳回',
							icon: 'close',
							date: val.reasonTime
						}
					]
				}
				//待付款
				if (status == 3) {
					this.currentStep = 3
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '平台审核',
							icon: 'file-text',
							date: val.auditTime
						},
						{
							name: '待付款',
							icon: 'account-fill'
						},
						{
							name: '待服务',
							icon: 'heart-fill'
						},
						{
							name: '确认服务',
							icon: 'checkbox-mark'
						}
					]
				}
				//待服务
				if (status == 4) {
					this.currentStep = 4
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '平台审核',
							icon: 'file-text',
							date: val.auditTime
						},
						{
							name: '已付款',
							icon: 'account-fill',
							date: val.depreciationCost?val.payTime:val.auditTime
						},
						{
							name: '待服务',
							icon: 'heart-fill',
						},
						{
							name: '确认服务',
							icon: 'checkbox-mark'
						}
					]
				}
				//待服务确认
				if (status == 5) {
					this.currentStep = 5
					this.confirmForm = {
						evaluate: val.evaluate ? val.evaluate : '',
						star: 5,
						starName: '非常好',
						// userServiceItems: val.serviceItems ? val.serviceItems.split(',') : []
					}
					// this.serviceItems = val.serviceItems ? val.serviceItems.split(',') : []
					// if (this.serviceItems.length > 0) {
					// 	this.serviceItems.forEach(list => {
					// 		this.serviceList.forEach(item => {
					// 			if (item.value == list) {
					// 				this.currentServiceList.push(item)
					// 				this.currentServiceTitle = this.currentServiceTitle + item.label + '、'
					// 			}
					// 		})
					// 	})
					// }
					// this.currentServiceTitle = this.currentServiceTitle.slice(0, -1)
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '平台审核',
							icon: 'file-text',
							date: val.auditTime
						},
						{
							name: '已付款',
							icon: 'account-fill',
							date: val.depreciationCost?val.payTime:val.auditTime 

						},
						{
							name: '已服务',
							icon: 'heart-fill',
							date: val.installTime
						},
						{
							name: '确认服务',
							icon: 'checkbox-mark'
						}
					]
				}
				//已完成
				if (status == 6) {
					this.currentStep = 5
					this.confirmForm = {
						evaluate: val.evaluate ? val.evaluate : '未发表评论',
						star: val.star ? val.star : 0,
						starName: val.starName ? val.starName : '',
						// userServiceItems: val.userServiceItems ? val.userServiceItems.split(',') : []
					}
					if(val.evaluate){
						this.isEvaluate = true
					}else{
						this.isEvaluate = false
					}
					// 废弃-服务项目有关
					// this.serviceItems = val.userServiceItems ? val.userServiceItems.split(',') : []
					// let arr = val.serviceItems ? val.serviceItems.split(',') : []
					// if (this.serviceItems.length > 0) {
					// 	this.serviceItems.forEach(list => {
					// 		this.serviceList.forEach(item => {
					// 			if (item.value == list) {
					// 				this.currentServiceList.push(item)
					// 			}
					// 		})
					// 	})
					// }
					// if (arr.length > 0) {
					// 	arr.forEach(list => {
					// 		this.serviceList.forEach(item => {
					// 			if (item.value == list) {
					// 				this.currentServiceTitle = this.currentServiceTitle + item.label + '、'
					// 			}
					// 		})
					// 	})
					// }
					// this.currentServiceTitle = this.currentServiceTitle.slice(0, -1)
					this.stepList = [{
							name: '提交申请',
							icon: 'edit-pen',
							date: val.createdTime
						},
						{
							name: '平台审核',
							icon: 'file-text',
							date: val.auditTime
						},
						{
							name: '已付款',
							icon: 'account-fill',
							date: val.depreciationCost?val.payTime:val.auditTime

						},
						{
							name: '已服务',
							icon: 'heart-fill',
							date: val.installTime
						},
						{
							name: '已完成',
							icon: 'checkbox-mark',
							date: val.finishTime
						}
					]
				}
			},
			//图片预览
			onPreview(url) {
				if (!url) {
					return false
				}
				var urlList = []
				urlList.push(url)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urlList
				})
			},
			//电话
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
			},
			//拨打门店电话
			callStorePhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: this.detailInfo.serviceTerminalInfo.phone
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: this.detailInfo.serviceTerminalInfo.phone,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.detailInfo.serviceTerminalInfo.phone
								})
							}
						}
					})
				}
			},
			//去门店
			handleDH() {
				const {
					lng,
					lat,
					name,
					address
				} = this.detailInfo.serviceTerminalInfo
				uni.openLocation({
					longitude: lng,
					latitude: lat,
					name,
					address,
				});
			},
			//判断数组是否一样
			// equalsArray(a, b) {
			// 	var m = new Map();
			// 	a.forEach(o => m.set(o, (m.get(o) || 0) + 1));
			// 	b.forEach(o => m.set(o, (m.get(o) || 0) - 1));
			// 	for (var value of m.values()) {
			// 		if (value !== 0) {
			// 			return false
			// 		}
			// 	}
			// 	return true
			// },
			//确认完成服务
			async onConfirmFinsh() {
				// if (this.equalsArray(this.confirmForm.userServiceItems, this.serviceItems)) {
				// 	this.submitData()
				// } else {
				// 	this.show = true
				// }
				this.submitData()

			},
			async submitData() {
				this.confirmForm.id = this.detailInfo.id
				let parms = JSON.parse(JSON.stringify(this.confirmForm))
				// parms.userServiceItems = String(parms.userServiceItems)
				uni.showLoading({
					title: '正在提交...'
				})
				try {
					const res = await this.$request({
						method: 'post',
						url: `/ltb-center/union-insurance-claim/confirmAndEvaluate`,
						data: parms
					})
					uni.navigateTo({
						url: `/indexPack/guarantee/applySuccess?type=applyDetail&id=${this.detailInfo.id}`
					});
					this.show = false
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					this.show = false
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			},
			//评分变化
			rateChange(val) {
				if (val == 1) {
					this.confirmForm.starName = '非常不好'
				}
				if (val == 2) {
					this.confirmForm.starName = '不好'
				}
				if (val == 3) {
					this.confirmForm.starName = '一般'
				}
				if (val == 4) {
					this.confirmForm.starName = '好'
				}
				if (val == 5) {
					this.confirmForm.starName = '非常好'
				}
			},
			//查看门店
			goStore(val) {
				uni.navigateTo({
					url: `/indexPack/guarantee/vicinityStore?thirdId=${val.thirdId}`
				})
			},
			//查看图片
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				if (logourl) {
					imgsArray[0] = logourl
					uni.previewImage({
						current: 0,
						urls: imgsArray
					});
				}

			},
			//立即支付
			async buyNow() {
				uni.showLoading({
					title: '网络请求中'
				})
				this.payLoading = true
				try {
					// 提交订单
					const {
						datas
					} = await this.$request({
						url: '/ltb-center/union-insurance-claim/pay',
						data: {
							id: this.detailInfo.id,
							panChannel: 1,
							payMoney: this.detailInfo.depreciationCost
						}
					})
					this.payLoading = false
					this.orderId = this.detailInfo.id
					uni.hideLoading()
					// // 跳转拉卡拉支付
					this.toPay(datas.counterUrl, {
						paySuccessRedirectURL: '/indexPack/guarantee/guaranteePaySuccess',
						isHadPaymentAPI: `/ltb-center/union-insurance-claim/detail/${this.orderId}`,
						type:'guarantee'
					})
				} catch (err) {
					this.payLoading = false
					uni.hideLoading()
					this.$refs.uToast.show({
						message: err.respMsg || '创建订单失败',
						position: 'top'
					})
				}
			},
			//重新填写信息
			async goEditApply(data) {

				uni.showLoading({
					title: '加载中...'
				})
				let currentIndex = 0
				try {
					const res = await this.$request({
						method: 'get',
						url: `/ltb-center/union-insurance/detail/${data.insuranceId}`,
					})

					if (res.datas.insuranceState == 2) {
						res.datas.insuranceState = 1
					}
					res.datas.goodsList.forEach((item, index) => {
						if (data.claimItem.goodsId == item.goodsId) {
							currentIndex = index
						}
					})
					data.goodsList = res.datas.goodsList
					uni.hideLoading()
					uni.navigateTo({
						url: '/indexPack/guarantee/applyForForm',
						success: (res) => {
							res.eventChannel.emit('formInfo', {
								data: data,
								index: currentIndex
							})
						}
					})


				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			}
		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.successRouter = option.success ? option.success : 0
			this.getDetailInfo(option.id)
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('formInfo', this.initForm)
		}
	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.detail-content {
			padding-bottom: 130rpx;

			.step-box {
				background: #fff;
				padding: 32rpx 20rpx;

				// /deep/ .u-steps-item__line {
				// 	background-color: #CF1A1B !important;
				// }

				/deep/ .u-steps-item__content {
					flex: none !important;
				}

				.slot-icon {
					width: 52rpx;
					height: 52rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #CF1A1B;
					border-radius: 50%;
					font-size: 24px;
				}

				.disable-icon {
					border: 1px solid rgba(0, 0, 0, 0.45);
				}

				.desc {
					font-size: 10px;
					color: #CF1A1B;
					width: 100%;
					text-align: center;

					.solt-title {
						font-size: 14px;
					}
				}

				.disable-desc {
					color: rgba(0, 0, 0, 0.45);
				}
			}

			.info-box {
				padding: 0 32rpx;
				padding-bottom: 36rpx;
				background: #fff;
				margin-top: 20rpx;

				.info-title {
					font-size: 14px;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					padding: 36rpx 0;
					display: flex;
					justify-content: space-between;
				}

				.text-area-box {
					padding: 30rpx 16rpx;
					background: #F5F5F6;
				}

				.list-cell {
					/deep/ .u-cell__title-text {
						font-size: 14px !important;
						color: rgba(0, 0, 0, 0.65) !important;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					}

					/deep/ .u-cell__value {
						width: 55%;
						font-size: 14px !important;
						color: rgba(0, 0, 0, 0.85) !important;
						line-break: anywhere;
					}

					/deep/ .u-cell__body {
						padding: 14rpx 0;
					}
				}

				.img-box {
					.img-item {
						.pic {
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;

							.img {
								width: 210rpx;
								height: 176rpx;
								margin-right: 14rpx;
								margin-bottom: 20rpx;
							}
						}

						.img-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 14px;

							.title {
								color: rgba(0, 0, 0, 0.65);
								padding-bottom: 30rpx;
							}

							.exp {
								color: #CF1A1B;
							}
						}
					}
				}
			}

			.reject-info {
				.btn {
					display: flex;
					margin-top: 20rpx;
					justify-content: flex-end;

					/deep/ .u-button {
						width: 200rpx;
					}
				}
			}

			.pay-info1 {
				background: #CF1A1B;
				color: #fff;
				.pay-status {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;
					padding-top: 20rpx;

					/deep/ .u-icon {
						margin-right: 20rpx;
					}
				}

				.pay-count {
					margin-bottom: 30rpx;
					text-align: center;
				}

				/deep/ .u-button {
					width: 200rpx;
				}
			}

			.wait-info {
				.btn {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding-top: 20rpx;

					/deep/ .u-button {
						margin: 0 20rpx;
						image{
							width: 80rpx !important;
							height: 80rpx !important;
						}
					}
				}

				.tips {
					display: flex;
					align-items: center;
					color: #CF1A1B;
					font-size: 12px;
				}
			}

			.server-code {
				padding-top: 36rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.title {
					width: 100%;
					text-align: center;
					font-size: 16px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}

				.qr {
					width: 100%;
					text-align: center;
					padding-top: 36rpx;

					image {
						width: 450rpx;
						height: 450rpx;
					}
				}

				.code {
					font-size: 24px;
					width: 100%;
					text-align: center;
					padding: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					font-weight: bold;
				}

				.tip {
					width: 100%;
					font-weight: 400;
					font-size: 14px;
					text-align: center;
					color: rgba(0, 0, 0, 0.65);
					padding-bottom: 40rpx;
				}

				.btn {
					width: 100%;

					/deep/ .u-button {
						width: 400rpx;
					}
				}
			}

			.tip-content {
				padding: 32rpx;

				.content {
					width: calc(100% - 48rpx);
					padding: 40rpx 24rpx;
					background: rgb(255, 222, 222);
					color: rgba(0, 0, 0, 0.65);
					font-size: 13px;

					.dot {
						display: inline-block;
						background: #CF1A1B;
						width: 10rpx;
						height: 10rpx;
						margin-right: 10rpx;
						border-radius: 50%;
						vertical-align: middle;
					}

					.phone {
						color: #CF1A1B;
					}
				}
			}

			.finish {
				.radio-group {
					.checkbox-item {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						align-items: center;
						width: 100%;
						margin-bottom: 10rpx;
						font-size: 14px;

						.checkbox-img {
							width: 80rpx;
							height: 80rpx;
							margin: 0 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				/deep/ .u-checkbox__icon-wrap--disabled {
					background-color: #CF1A1B !important;
					border-color: #CF1A1B !important;

					.u-icon__icon {
						color: #fff !important;
					}
				}

				/* 评分星星禁用后全是灰色，修改为红色 */
				/deep/ .uicon-star-fill {
					color: rgb(230, 50, 50) !important;
				}

				.text-area {
					padding-top: 42rpx;
					padding-bottom: 20rpx;
				}

				.rate {
					display: flex;
					justify-content: space-between;

					.rate-name {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.65);
					}
				}

				.btn {
					width: 100%;
					text-align: center;

					/deep/ .u-button {
						width: 400rpx;
					}
				}
			}
		}

		.footer {
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx 32rpx;
			z-index: 3;
		}
	}
</style>